<template>
  <div class="bigScreen">
    <div class="banner">
      <div class="show1">SanTanNew购卡平台</div>
      <div class="show2">简单、快捷、全面的一站式购卡平台</div>
    </div>
    <div class="feature" style="margin-top: 1em">
      <div
        class="feature_item"
        @click="writeInfo('2',5,7)"
        v-if="!writePayInfo && !isPaying"
      >
        <img
          class="item_iconfont_1"
          :src="require('../assets/img/openAi.webp')"
        />
        <div class="title">
          聊天妙妙屋<span style="color: red">通用</span>版账号
        </div>
        <div class="content">
          <span style="color: red">库存:{{ stock }}</span>
        </div>
        <div class="content">
          批发价7rmb(800次) 5个起售<span style="color: red">(点击购买)</span>
        </div>
      </div>

      <div
        class="feature_item"
        @click="writeInfo('3',2,25)"
        v-if="!writePayInfo && !isPaying"
      >
        <img
          class="item_iconfont_1"
          :src="require('../assets/img/openAi.webp')"
        />
        <div class="title">
          聊天妙妙屋<span style="color: red">专业</span>版账号
        </div>
        <div class="content">
          <span style="color: red">库存:{{ stock }}</span>
        </div>
        <div class="content">
          批发价25rmb(800次) 2个起售<span style="color: red">(点击购买)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bigScreen from "@/api/bigScreen";
import { beginSearchPayStatus } from "@/utils/pay";
export default {
  data() {
    return {
      writePayInfo: false,
      isPaying: false,
      stock: 0,
      form: {
        amount: 1,
        phone: "",
      },
    };
  },
  mounted() {},
  async created() {
    beginSearchPayStatus();
    this.getVoiceCount();
  },
  methods: {
    async getVoiceCount() {
      const res = await bigScreen.getVoiceList();
      this.stock = res.stock;
      localStorage.setItem("this.unitPrice", res.unitPrice);
    },
    writeInfo(key,maxCount=1,price=999) {
      if (this.stock <= 0) {
        this.$message({
          message: "没有库存咯！无法购买。",
          type: "warning",
        });
      } else {
        this.writePayInfo = true;
        this.$router.push({
          name: "writeFormSpecial",
          query: {
            type: key,
            maxCount:maxCount,
            price:price
          },
        });
      }
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.bigScreen {
  width: 90%;
  text-align: center;
  padding-top: 0em;
  margin: 0 auto;
  background-color: #f5f7fb !important;
  .banner {
    background-color: #4aac94;
    padding-top: 3em;
    padding-bottom: 3em;
    .show1 {
      margin: 0;
      font-weight: 400;
      color: #fff;
      font-size: 3rem;
    }
    .show2 {
      margin-top: 1.2em;
      margin-bottom: 0;
      font-weight: 400;
      color: #fff;
      font-size: 1.2rem;
    }
    .show3 {
      font-weight: 400;
      margin-top: 0.8em;
      color: #fff;
      font-size: 1.2rem;
      margin-bottom: 0;
    }
  }
  .feature {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    text-align: center;
    box-sizing: border-box;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .feature_item {
      cursor: pointer;
      vertical-align: top;
      display: inline-block;
      width: 22em;
      margin: 1em 1em;
      background-color: #fff;
      padding: 0.5em 2.5em;
      padding-bottom: 2em;
      box-shadow: 0 3px 3px 0 rgb(0 0 0 / 5%);
    }
    .feature_item_2 {
      cursor: pointer;
      vertical-align: top;
      display: inline-block;
      width: 22em;
      margin: 1em 1em;
      background-color: #fff;
      padding: 0.5em 2.5em;
      padding-bottom: 2em;
      padding-top: 2em;
      box-shadow: 0 3px 3px 0 rgb(0 0 0 / 5%);
      .page-title {
        display: inline-block;
        position: relative;
        padding-right: 25px;
        padding-bottom: 15px;
        color: #a788e7;
        font-size: 1.4em;
        text-align: left;
      }
      .page-title-wx {
        display: inline-block;
        position: relative;
        padding-right: 25px;
        padding-bottom: 15px;
        color: #67c23a;
        font-size: 1.4em;
        text-align: left;
      }
      .page-item {
        font-size: 1em;
        color: grey;
        text-align: left;
      }
    }
    .item_iconfont_1 {
      width: 10rem;
      height: 10rem;
      margin-top: 1.5em;
    }

    .item_iconfont_2 {
      width: 3rem;
      height: 3rem;
      margin-top: 1.5em;
    }
    .item_iconfont_3 {
      width: 3rem;
      height: 3rem;
    }
    .item_iconfont {
      width: 5rem;
      height: 5rem;
      margin-top: 1.5em;
    }
    .title {
      margin-top: 0.6em;
      margin-bottom: 0.6em;
      font-size: 2.5rem;
      width: 100%;
    }
    .feature_item .content {
      line-height: 200%;
      font-size: 1rem;
      color: #444;
    }
  }
  a {
    color: #4aac94;
    text-decoration: none;
  }
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.titleSpecial {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-size: 2.5rem;
  width: 100%;
}
.ddje {
  width: 100%;
  text-align: left;
  color: red;
}
.payBox {
  justify-content: center;
  display: flex;
  align-items: center;
  button {
    display: flex;
    align-items: center;
  }
}
</style>